<template>
  <div>
    <div class="marketCapital" style="height: auto">
      <router-link to="/market">
        <div>市场资金
          <p>
            <span>{{ fundTrends.market | fundText }}
            </span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="~assets/images/left.png" alt="">
          </p>
        </div>
      </router-link>
      <div style="height:1.5rem;width:100%;position:relative">
        <loading :own-state="ownState"></loading>
        <error :own-state="errorState"></error>
        <div ref="capital" style="height:1.5rem;width:100%;"></div>
      </div>
      <div class="showCenterText">
        <div class="centerText">
          <div style="padding-left: 0.2rem">
            <div style="text-align: left;">流入</div>
            <span>{{fundTrends.market.ljbmoney | numOfLg}}</span>
            {{fundTrends.market.ljbmoney | textOfLg}}
          </div>
          <div>
            ........&nbsp;&nbsp;&nbsp;
          </div>
        </div>
        <div :class="[{right: Number(fundTrends.market.ljjlr) < 0}, 'centerText', 'center']">
          <div>
            今日{{Number(fundTrends.market.ljjlr) > 0 ? '净流入' : '净流出'}}<br/>
            <span>{{fundTrends.market.ljjlr | numOfLg}} {{fundTrends.market.ljjlr | textOfLg}}</span>
          </div>
        </div>
        <div class="centerText right">
          <div>
            &nbsp;&nbsp;........
          </div>
          <div style="padding-right: 0.2rem">
            <div style="text-align: right;">流出</div>
            <span>{{fundTrends.market.ljsmoney | numOfLg}}</span>
            {{fundTrends.market.ljsmoney | textOfLg}}
          </div>
        </div>
      </div>
      <div class="showDate" v-if="!errorState">
        数据截止至 {{fundTrends.market.date | dataTimeFormatAll}} <span></span>
      </div>
      <div class="interval"></div><!--间隔-->
      <!--<router-link to="/stockConnect/sh"><div>沪股通资金 <p><span>{{ fundTrends.hgt| fundText }}</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="~assets/images/left.png" alt=""></p></div></router-link>-->
      <!--<router-link to="/stockConnect/sz"><div>深股通资金 <p><span>{{ fundTrends.sgt| fundText }}</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="~assets/images/left.png" alt=""></p></div></router-link>-->
      <router-link to="/largeOrder">
        <div>大单资金
          <p>
            <span>{{ fundTrends.dd | fundText }}</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="~assets/images/left.png" alt="">
          </p>
        </div>
      </router-link>
    </div>

    <div class="interval"></div><!--间隔-->
    <div class="marketCapital" style="height: auto">
      <router-link to="/centralBank">
        <div>央行资金
          <p>
            <span>今日{{fundTrends.centralBank >= 0 ? '净投放':'净回笼'}}{{fundTrends.centralBank}}亿</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <img src="~assets/images/left.png" alt="">
          </p>
        </div>
      </router-link>
      <router-link to="/shibor">
        <div>上海银行间拆放利率 Shibor
          <p>
            <span>隔夜利率{{fundTrends.shibor}}%</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <img src="~assets/images/left.png" alt="">
          </p>
        </div>
      </router-link>
      <router-link to="/finance">
        <div>融资余额
          <p>
            <span>比前一交易日{{fundTrends.finance > 0 ? '增加' : '减少'}}{{Math.abs(fundTrends.finance)}}亿</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <img src="~assets/images/left.png" alt="">
          </p>
        </div>
      </router-link>
      <router-link to="/lifted">
        <div>解禁市值
          <p>
            <span>今日解禁亿{{fundTrends.Lifted}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <img src="~assets/images/left.png" alt="">
          </p>
        </div>
      </router-link>
    </div>
    <div class="interval"></div><!--间隔-->

  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import { extend } from '@/common/common'
import { numOfLg, textOfLg } from '@/filters/legendFormat'
import { dataTimeFormatAll } from '@/filters/dataTime'
const option = {
  color: [
    '#eb333b', '#1aae52'
  ],
  series: [
    {
      name: '流入流出',
      type: 'pie',
      hoverAnimation: false,
      clockwise: false,
      radius: ['64%', '76%'],
      avoidLabelOverlap: true,
      label: {
        normal: {
          show: false,
          position: 'center',
          textStyle: {
            fontSize: '20',
            fontWeight: 'bold'
          }
        }
      },
      data: [
        {value: 4.53, name: '流入'},
        {value: 3.08, name: '流出'}
      ]
    }
  ]
};
export default {
  name: 'capital',
  data () {
    return {
      myChart: '',
      ownState: true,
      errorState: false,
      fundTrends: {
        market: {
          days: '',
          date: '',
          je: '',
          ljbmoney: '',
          ljsmoney: '',
          ljjlr: ''
        },
        hgt: {
          days: '',
          je: '',
          ljbmoney: '',
          ljsmoney: '',
          ljjlr: ''
        },
        sgt: {
          days: '',
          je: '',
          ljbmoney: '',
          ljsmoney: '',
          ljjlr: ''
        },
        dd: {
          days: '',
          je: '',
          ljbbmoney: '',
          ljsbmoney: '',
          ddljjlr: ''
        }
      }
    }
  },
  filters: {
    numOfLg,
    textOfLg,
    dataTimeFormatAll,
    fundText(val) {
      if (!val) {
        return ''
      }
      val.ljjlr = val.ljjlr || val.ddljjlr || 0;
      const reverse = (val.ljjlr > 0 && val.je < 0) || (val.ljjlr < 0 && val.je > 0)
      return `今日${reverse ? (Number(val.je) > 0 ? '净流出' : '净流入') : (Number(val.je) > 0 ? '净流入' : '净流出')}${numOfLg(val.ljjlr)}${textOfLg(val.ljjlr)}，${reverse ? '结束' : '连续'}${reverse ? val.days : val.days + 1}天${Number(val.je) > 0 ? '净流入' : '净流出'}`
    }
  },
  methods: {
    // 获取资金动态数据
    getFundTrends () {
      let vm = this;
      remoteDAO.invoke(constant.InterfaceEnum.GET_OVER_ALL_FINANCE, null).then((result) => {
        vm.ownState = false;
        vm.fundTrends = result;
        const startAngle = parseFloat(result.market.ljsmoney) / (parseFloat(result.market.ljsmoney) + parseFloat(result.market.ljbmoney)) * 180;
        let object = extend(option, {
          series: [{
            startAngle: startAngle,
            data: [
              {value: result.market.ljbmoney},
              {value: result.market.ljsmoney}
            ]
          }]
        });
        vm.myChart.setOption(object);
      }, () => {
        vm.ownState = false;
        vm.errorState = true
      });
    }
  },
  mounted () {
    const vm = this;
    vm.$nextTick(function () {
      vm.myChart = echarts.init(vm.$refs.capital);
      vm.$loop.register(vm.getFundTrends);
    })
  },
  activated () {
    this.$loop.register(this.getFundTrends);
  },
  beforeDestroy () {
    echarts.dispose(this.myChart);
    this.$loop.unregister(this.getFundTrends);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import '../../../assets/css/variables.less';
  .marketCapital{
    position: relative;
    a{
      text-decoration: none;
      div{
        font-size: 0.16rem;
        margin: 0 auto;
        width:90%;
        height:0.55rem;
        color: rgb(34,34,34);
        font-family: PingFangSC-Regular;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #dddddd;
        p{
          white-space: nowrap;
          height: 100%;
          display: inline-flex;
          align-items: center;
          img{
            height: 0.16rem;
          }
          span{
            font-size: 0.12rem;
            color:#787878;
            font-family: PingFangSC-Regular;
          }
        }
      }
    }
    a:last-child{
      div{
        border-bottom: none;
      }
    }
  }
  .showDate{
    height: 0.2rem;
    width:100%;
    font-size: 0.12rem;
    margin-bottom: 0.2rem;
    color: #787878;
  }
  .showCenterText{
    width:100%;
    height: 0.5rem;
    position:absolute;
    top:1.09rem;
    .centerText{
      width:33.33%;
      float: left;
      font-size: 0.12rem;
      display: inline-flex;
      justify-content: space-around;
      align-items: center;
      color:rgb(85,85,85);
      span{
        font-size: 0.16rem;
        color: rgb(235,51,59);
      }
      &.center {
        font-size: 0.14rem;
        color:rgb(34,34,34);
      }
    }
  }
  .right{
    span{
      color: #1aae52 !important;
    }
  }
</style>
